Assignment 4 Write-up

Name: Ge Jin

Student ID: 3037754475

Link: https://cal-cs184-student.github.io/hw-webpages-sp24-maxwelljin/hw4/index.html

Overview

In this project, we implement a cloth simulation, which comprises five different components. To begin with, we develop a mass-spring system to model the cloth. Within the system, we add different types of constraints, including structural, shearing, and bending, to connect different mass points via springs. Then, we use Verlet integration for the numerical simulation of the interactions between the mass points and the spring system. Additionally, we provide support to handle collisions with other objects and self-collisions. The shaders are developed to accelerate the rendering process since ray-tracing cannot handle the real-time scenario. We developed various types of shader methods through GLSL shader programs.

Part 1

Overview of Implementation: In the implementation, we start our algorithm by creating an evenly spaced grid of masses (the spacing is determined by the number of width points and the number of height points). We also give a small random z-value if the orientation is vertical - this ensures the randomness of the result and brings it closer to physical reality. Then, we add springs, which serve as constraints for the points, into our system. We iterate over all possible vertices and add structural, shearing, and bending constraints between those point masses. We also convert the point mass’s 2D grid index into a 1D index.

(a) Screenshots of pinned2.json from a view angle

(b)

(1) Without any shearing constraints [Above]

(2) With only shearing contraints [Above]

(3) With all constraints [Above]

Part 2

(a)

Different spring constant:

(High KS)

(Low KS)

A higher spring constant will make the cloth appear relatively inelastic, resulting in fewer folds. For instance, in this image, we can observe that when ks = 50000, the cloth has fewer bends. In contrast, with k s = 500, there are more folds.

Different Density:

(Low Density, 1.5g/cm2)

(Low Density, 150g/cm2)

A lower density will make the cloth appear relatively inelastic, resulting in fewer folds. For instance, in this image, we can observe that when density is 1.5g/cm2, the cloth has fewer bends. In contrast, with density is 150, there are more folds.

Damping:

(Low Damping)

(High Damping)

The lower damping coefficient results in less energy dissipation - it means the cloth will retain its kinetic energy after being distributed. Therefore, in the low damping parameter, we can observe there's longer-lasting oscillation and movement. By contrast, in higher damping coefficient, the cloth will come to rest very quickly.

(b) Final Resting State

Part 3

Overview: In this part, we first determine the intersection between the point and the object, whether it's a sphere or a plane. To do this, we calculate the distance between the point and the center of the sphere; if it's within the radius, it means there is an intersection. We then project it back to the surface and add a displacement vector to make the point adhere to the object's surface.

(a)

ks = 500 (Above)

ks = 5000 (Above)

ks = 50000 (Above)

A higher spring constant will make the cloth appear relatively inelastic, resulting in fewer folds. Since a higher spring constant means the cloth resist stretching, the cloth doesn't conform closely to the contours of the sphere when the ks is high. Instead, it tends to maintain its shape more rigidly.

(b)

Part 4

(a) Screenshot:

(b)

Small ks value

Large ks value

Higher ks values will make the cloth less flexible; therefore, when it hits the ground, the cloth will have fewer bends, and the self-collision will be less. By contrast, a lower ks value means the cloth is easier to bend and drape, resulting in more flexible behavior. When it hits the ground, cloth with a lower ks value will exhibit more folds and wrinkles. The lower stiffness allows the fabric to conform to the surface.

Low density (above)

High density (above)

In the spring-mass model for cloth simulatoin, higher density will lead to higher mass per mass point. Therefore, it will increase the inertia of each particle in cloth, and it can drag other parts more effectively. In addition, the spring may compress and stretch more since the spring constant doesn't change. The heavier cloth has more kinetic energy, therefore, it will cause more dynamic folding (as shown in the screenshots)

Part 5

(a) A shader program is capable of rendering frames with lighting effects, facilitating real-time experiences, such as 60 fps gameplay, without the need for ray-tracing. In the vertex shader, vertices are transformed from object space to world space, with their positions subsequently projected onto the camera plane. This shader also converts the normal and tangent vectors to world space coordinates. The fragment shader then calculates the color for each pixel, operating in UV coordinates, employing various shading algorithms like diffuse and Blinn-Phong shading. These algorithms consider the angle of incoming light and the vertex metadata, such as position, normal vector, and tangent line, to quickly estimate the radiance.

(b)

The Blinn-Phong shading includes ambient light, specular reflection, and diffuse light. The diffuse light is the same as in the diffuse shading part, where we calculate the distance between the light source and the point, and consider the angle between the light and the normal vector. It’s similar to the diffusion of environmental light. Additionally, the ambient light represents the general illumination in the scene that affects all objects uniformly. It provides the basic level of light to ensure no part of the object is completely dark. For the specular light, it utilizes the half vector, the unit vector between the direction of the light source and the direction to the viewer, to calculate the reflection of light that creates highlights on the surface. It provides a mirror-like reflection.

Only with specular light

Only with ambient light

Only with diffuse light

Blinn-Phong shading result (includes everything)

(d) Bump Mapping

(Bump: top 16, bottom 128)

(Displacement: top 16, bottom 128)

In bump mapping, we change the normal vectors according to the height map. To do this, we calculate the derivatives along the surface (du and dv) and then calculate the new normal vector. However, this normal vector remains in object space. To convert it back to world space, we utilize the tangent-bitangent-normal matrix to transform it into world space. As the normal vector changes, we can observe the lighting effects.

Displacement mapping, on the other hand, directly modifies the position of vertices in addition to changing the normal vector. This makes the texture more realistic, and we can control the displacement through the height scaling variable.

Note that higher resolution greatly improves displacement mapping. With more details, there are more vertices to be displaced, leading to a more accurate effect on the mesh and creating a more textured appearance. This is particularly beneficial for depicting complex surfaces where subtle variations contribute significantly to the overall realism.

(e) Mirror Shading